<template>
  <div id="worksCenter">
    <van-nav-bar class="header"
                 fixed
                 @click-left="diffBack"
                 @click-right="editing"
                 :border="false">
      <div class="left"
           slot="left">
        <van-icon name="arrow-left"
                  size="24px"
                  color="#fff" />
      </div>
      <div class="title fz3"
           slot="title">作品中心</div>
      <div class="right wordsWrite fz3"
           slot="right">{{btnTxt}}</div>
    </van-nav-bar>

    <div class="main">
      <!-- 订单发送消息状态处理 end -->
      <van-checkbox-group v-model="workCenterUids"
                          :max="9">
        <div class="worksList"
             v-for="(items,key) in list"
             :key="key">
          <div class="month wordsGray fz4">{{items.month}}</div>
          <div class="imgList">
            <div class="worksImg"
                 v-for="(item,index) in items.list"
                 :key="index">
              <div class="imag"
                   @click="show_preview(key,index)">
                <img v-lazy="item.imageUrl"
                     alt=""
                     height="100%"
                     width="100%">
              </div>
              <div class="homeBool"
                   v-show="item.home&&!edit">
                <img src="@/assets/img/performance/homePage/homeBool.png"
                     alt=""
                     height="100%"
                     width="100%">
              </div>
              <van-checkbox class="vcheckbox"
                            v-show="edit"
                            :name="item.uid"
                            checked-color="#5E8EFE"
                            @click="work_centerUids(item.uid,item.imageUrl)"
                            v-model="item.home"></van-checkbox>
            </div>
          </div>
        </div>
      </van-checkbox-group>

      <div class="nomore">
        <div class="line"></div>
        <div class="say">没有更多作品</div>
        <div class="line"></div>
      </div>
      <div class="edit"
           v-show="edit"></div>
    </div>
    <div class="botbtn flex"
         v-show="edit">
      <div class="btn bgprimary wordsWrite fz4"
           @click="homeShortSetting">确定</div>
    </div>
    <van-image-preview v-model="showPreview"
                       :images="images"
                       :startPosition="index"
                       @change="onChange">
    </van-image-preview>
  </div>
</template>
<script>
import { getuserUid, getPassword, getUserLogin,getUserInfo,getRole } from "@/utils/auth.js";
export default {
  data() {
    return {
      list: [],
      btnTxt: "",
      edit: true,
      showPreview: false,
      images: [],
      workCenterUids: [],
			imgList:[],
      addNum: true,
      index: 0,
			toast:"",
			nImage:0,
    };
  },
  mounted() {
    // console.log(getuserUid())
    this.getUserWorks();
  },
  methods: {
    work_centerUids(uid,shortImgUrl) {
      if (
        this.workCenterUids.length == 9 &&
        !this.workCenterUids.includes(uid)
      ) {
        this.$toast("最多不能超过9张!");
      }
			else{
				if(this.workCenterUids.includes(uid)){
					this.imgList.splice(this.imgList.findIndex(shortImgUrl => shortImgUrl == shortImgUrl), 1);
				}else{
					this.imgList.push(shortImgUrl)
				}

			}
    },
    show_preview(key,index) {
      this.images=[]
      if(this.list[key].list.length>0){
        for(let i of this.list[key].list){
          this.images.push(i.imageUrl)
        }
      }
      this.showPreview=true
      this.index=index
    },
    onChange(index) {
      this.index = index;
    },
    diffBack() {
      this.$router.push("/performance");
    },
		//加载中
		loading(msg){
			const toast = this.$toast.loading({
				duration: 0,
				mask: false,
				message: msg,
				forbidClick:true
			});
			return toast;
		},
    //获取个人中心
    async getUserWorks() {
      this.workCenterUids = [];
			this.imgList=[]
      const e = await HTTP("app/image/getUserWorks", {
        userUid: getuserUid(),
        months: 6
      });
      if (e.code == 200) {
        this.list = e.data;
        for (let i of e.data) {
          if (i.list.length > 0) {
            for (let j of i.list) {
              if (j.home) {
        //         this.workCenterUids.push(j.uid);
								// this.imgList.push(j.shortImgUrl)
              }
            }
          }
        }
        if (this.workCenterUids.length == 9) {
          this.addNum = true;
        }
      } else {
        this.$toast(e.msg || "服务器异常");
        return;
      }
    },
    //提交
    async homeShortSetting() {
			console.log(this.imgList)
      if (this.workCenterUids.length > 0 && this.workCenterUids.length <= 9) {
				let workCenterUids = [];
				this.sendImg();
      }
			else {
        this.$toast("请选择");
      }
    },
		//发送图片消息
		sendImg:function(){
			if(this.nImage<this.imgList.length){
				this.toast = this.loading('发送中');
				var path = this.imgList[this.nImage];
				this.nImage++;
				var _this = this;
				var obj = getUserInfo();
				var timestamp = Date.parse(new Date()); //当前时间戳
				var params = {
					title:this.$store.state.groupTitle,
					orderId:this.$route.query.orderId,
					type:'works',
					name:obj.userName,
					photoUrl:obj.pictureUrl,
					content:path,
					time:timestamp,
                    roleId:getRole()?getRole():''
				};
				HTTP('msg',{
					roomType:"group",
					content:1,
					userUid:getuserUid(),
					groupUid:this.$route.query.id,
					ext:JSON.stringify(params)
				})
				.then(res=>{
					if(res.code == 200){
						this.sendImg();
					}
					else{
						this.$toast(res.msg);
					}
				})
			}
			else{
				//跳转
				setTimeout(()=>{
					this.toast.clear();
					this.$router.replace({
						path:'/performance/chat',
						query:{
							id:this.$route.query.id,
							orderId:this.$route.query.orderId
						}
					});
				},3000)
			}
		},
    editing() {
      this.edit = !this.edit;
      if (this.edit) {
        this.btnTxt = "取消";
      } else {
        this.getUserWorks();
        this.btnTxt = "编辑首页图";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#worksCenter {
  .header {
    background: $color-primary;
    color: #ffffff;
    .title {
      color: #ffffff;
    }
  }
  .main {
    margin-top: 46px;
    padding: 0.4rem 0.24rem;
    .worksList {
      .imgList {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0.1rem;
        .worksImg {
          position: relative;
          .imag {
            width: 100%;
            height: 100%;
          }
          width: 1.68rem;
          height: 1.68rem;
          margin: 0.1rem 0.1rem 0 0;
          &:nth-child(4n) {
            margin-right: 0;
          }
          .homeBool {
            height: 1.2rem;
            width: 1.2rem;
            position: absolute;
            bottom: 0;
            right: 0;
          }
          .vcheckbox {
            position: absolute;
            bottom: 0.06rem;
            right: 0.06rem;
          }
        }
      }
    }
    .nomore {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 0.3rem;
      .say {
        text-align: center;
        color: #aaaaaa;
        // z-index: 101;
        background: #f9f9f9;
      }
      .line {
        top: 0.15rem;
        height: 1px;
        width: 2rem;
        background: #e5e5e5;
      }
    }
    .edit {
      height: 1.6rem;
    }
  }
  .botbtn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1.6rem;
    align-items: center;
    background: #f9f9f9;
    box-shadow: 0px 2px 8px 4px rgba(216, 216, 216, 0.5);
    .btn {
      margin: auto;
      width: 90%;
      text-align: center;
      height: 0.88rem;
      line-height: 0.88rem;
      border-radius: 0.1rem;
    }
  }
}
</style>
